<template>
<view>
	<view class="listBox" v-for="(item,index) in shopList" :key='item.goods_id' @click="setshopdetal(item.goods_id)">
		<!-- 左边 -->
		<view class="list_left">
			<image  :src="item.goods_small_logo==''?url:item.goods_small_logo" mode="widthFix"></image>
		</view>
		<!-- 右边 -->
		<view class="list_right">
			<view class="shopName">{{item.goods_name}}</view>
			<view class="money">￥ {{item.goods_price|numto}}</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000160455569_1_400x400.jpg',
				queryObj:{
					query:'',
					cid:null,
					pagenum:1,
					pagesize:10,
				},
				total:0,
				shopList:[],
				isloding:false
			};
		},
		onLoad(obj) {
			this.queryObj.cid=obj.cid||'';
			this.queryObj.query=obj.query||'';
			this.getshopList();
		},
		onReachBottom() {
			if(this.queryObj.pagenum*this.queryObj.pagesize>=this.total){uni.$showMeg('我是有底线的!');return}
			if(this.isloding){return}
			this.queryObj.pagenum++;
			this.getshopList()
		},
		methods:{
			getshopList(cd){
				this.isloding=true;
				uni.$http.get('/api/public/v1/goods/search',this.queryObj).then(res=>{
					this.total=res.data.message.total;
					this.shopList=[...this.shopList,...res.data.message.goods]
					this.isloding=false;
					cd&&cd();
				})
			},
			setshopdetal(id){
				uni.navigateTo({
					url:'../goods_detail/goods_detail?goods_id='+id
				})
			}
		},
		filters:{  
			numto(num){
				return Number(num).toFixed(2)
			}
		},
		onPullDownRefresh() {
			this.queryObj.pagenum=1,
			this.shopList=[]
			this.total=0;
			this.isloding=false
			this.getshopList(()=>uni.stopPullDownRefresh())//关闭下拉刷新
		}
	}
</script>

<style lang="scss">
.listBox{display: flex;justify-content:space-around;border-bottom:1rpx #ccc solid;}
.list_left{flex:3;padding:0 40rpx;image{width: 100%;}}
.list_right{flex:4;display:flex;flex-direction:column;justify-content: space-around;padding:10rpx;}
.money{color: red;}
.shopName{font-size:24rpx;word-wrap: break-word;
word-break: break-all;
overflow: hidden;}
</style>
